<template>
	<div>
		<!-- 面包屑 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>小区管理</el-breadcrumb-item>
		</el-breadcrumb>



		<!-- 搜索框 -->
		<el-row style="margin-top: 20px;">
			<el-form :inline="true">
				<!-- 小区名称搜索框 -->
				<el-form-item label="小区名称">
					<el-input clearable @clear="queryCommunityList" v-model="queryInfo.communityName"
						placeholder="请输入小区名称"></el-input>
				</el-form-item>


				<!-- 创建时间的搜索 -->
				<el-form-item label="创建时间">
					<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="dataValue" type="daterange"
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>

				<!-- 搜索按钮 -->
				<el-form-item>
					<el-button type="primary" @click="queryCommunityList">搜索</el-button>
				</el-form-item>

				<!-- 新增小区按钮 -->
				<div><el-button @click="addCommunity" type="primary">新增小区</el-button></div>
			</el-form>
		</el-row>



		<!-- 表格区域 -->
		<el-table :data="communityList" boder style="width: 100%">
			<el-table-column prop="communityId" label="ID">
			</el-table-column>
			<el-table-column prop="communityName" label="名称">
			</el-table-column>
			<el-table-column prop="communityAddress" label="位置">
			</el-table-column>
			<el-table-column prop="communityUserCount" label="用户数量"></el-table-column>
			<el-table-column prop="communityShopCount" label="关联门店"></el-table-column>
			<el-table-column prop="createTime" label="创建时间"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-link type="primary" @click="getStore(scope.row.communityId)">查看关联门店</el-link>
					<el-link type="success" @click="editCommunity(scope.row)">编辑小区</el-link>
					<el-link @click="delCommunity(scope.row.communityId)" type="danger">删除</el-link>
				</template>
			</el-table-column>
		</el-table>



		<!-- 页码分页 -->
		<!-- current-page要访问的页码，page-sizes每页展示的条数，page-size -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryInfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>



		<!-- 增加对话框 -->
		<el-dialog :title="title" :visible.sync="dialogFormVisible" @close='cancle'>
			<el-form :model="communityData">
				<el-form-item label="小区名称" label-width="80px" prop="communityName">
					<el-input placeholder="请输入小区名称" v-model="communityData.communityName" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="所属地区" label-width="80px">
					<el-cascader placeholder="请选择省市区" v-model="address" :options="citys"></el-cascader>
				</el-form-item>

				<el-form-item label="" label-width="80px" prop="communityAddress">
					<el-input placeholder="请输入小区详细地址" v-model="communityData.communityAddress"></el-input>
				</el-form-item>

				<el-form-item label="小区坐标" label-width="80px">
					<el-button @click="getLocation">获取位置</el-button>
					<span v-show="communityData.communityLatitude&&communityData.communityLongitude ">
						{{communityData.communityLatitude}},
						{{communityData.communityLongitude}}
					</span>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancle">取 消</el-button>
				<el-button type="primary" @click="confirm">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 关联门店 -->
		<el-dialog title="查看关联门店" :visible.sync="dialogTableVisible">
			<el-row>
				<el-form :inline="true">
					<!-- 小区名称搜索框 -->
					<el-form-item label="门店名称">
						<el-input clearable v-model="storesQueryInfo.shopName" placeholder="请输入门店名称"></el-input>
					</el-form-item>

					<!-- 搜索按钮 -->
					<el-form-item>
						<el-button @click="getStore(communityId)" type="primary">搜索</el-button>
					</el-form-item>

					<el-form-item>
						<el-button @click="toaddStores" type="primary">添加门店</el-button>
					</el-form-item>


				</el-form>

			</el-row>
			<el-table :data='storesList'>
				<el-table-column property="shopId" label="ID" width="150"></el-table-column>
				<el-table-column property="shopName" label="name" width="150"></el-table-column>
				<el-table-column property="shopAddress" label="地址" width="150"></el-table-column>
			</el-table>
			<el-row>
				<!-- 页码分页 -->
				<!-- current-page要访问的页码，page-sizes每页展示的条数，page-size -->
				<el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
					:current-page="storesQueryInfo.pageNum" :page-sizes="[5, 10, 15, 20]"
					:page-size="storesQueryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
					:total="storeTotal">
				</el-pagination>


			</el-row>
		</el-dialog>


		<el-dialog title="添加关联门店" :visible.sync="dialogShopVisible">
			<el-row>
				<el-form :inline="true" :model="shopQueryInfo">
					<!-- 小区名称搜索框 -->
					<el-form-item label="门店名称">
						<el-input @clear='toaddStores' clearable v-model="shopQueryInfo.shopName" placeholder="请输入门店名称"></el-input>
					</el-form-item>

					<!-- 搜索按钮 -->
					<el-form-item>
						<el-button @click="toaddStores" type="primary">搜索</el-button>
					</el-form-item>




				</el-form>

			</el-row>
			<el-table :data='shopList'  @selection-change="handleSelectionChange">>
				 <el-table-column
				      type="selection"
				      width="55">
				    </el-table-column>
				<el-table-column property="shopId" label="ID" width="150"></el-table-column>
				<el-table-column property="shopName" label="name" width="150"></el-table-column>
				<el-table-column property="shopAddress" label="地址" width="150"></el-table-column>
			
			</el-table>
			<el-row>
				<!-- 页码分页 -->
				<!-- current-page要访问的页码，page-sizes每页展示的条数，page-size -->
				<el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
					:current-page="shopQueryInfo.pageNum" :page-sizes="[5, 10, 15, 20]"
					:page-size="shopQueryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
					:total="shopTotal">
				</el-pagination>


			</el-row>
		</el-dialog>






	</div>
</template>

<script>
	import citys from '../assets/citydata.js'
	export default {
		data() {
			return {
				queryInfo: {
					communityName: '',
					startTime: '',
					endTime: '',
					pageNum: 20,
					pageSize: 1
				},
				dataValue: '',
				total: 1,
				communityList: [],
				dialogFormVisible: false,
				title: '新增小区',
				communityData: {
					addOrUpdateFlag: 1,
					communityAddress: "",
					communityAreaCode: "",
					communityCity: "",
					communityCoordinates: "",
					communityDistrict: "",
					communityId: "",
					communityLatitude: "",
					communityLongitude: "",
					communityName: "",
					communityProvince: "",

				},
				address: [], // 定义地址，用来接收省市区联动数据
				citys: citys,
				communityId: '', //小区编号
				storesList: [], //关联门店集合
				storesQueryInfo: {
					pageNum: 1,
					pageSize: 10,
					shopName: '',
					communityId: '',

				},
				storeTotal: 1, //总数据条数
				dialogTableVisible: false,
				shopList: [], //所有的门店集合
				shopQueryInfo: {
					pageNum: 1,
					pageSize: 10,
					shopName: '',
					communityId: '',

				},
				shopTotal: 1,
				dialogShopVisible: false,


			}
		},
		methods: {
			handleSelectionChange(val) {
			       
				   console.log(val)
				   
			      },
			
			// 每页显示数量发生改变时触发
			handleSizeChange2(val) {
				// 更改请求参数中的pageSize
				this.shopQueryInfo.pageSize = val
				// 设置当改变后默认访问第一页
				this.shopQueryInfo.pageNum = 1
				// 重新查询数据
				this.toaddStores()
			},
			// 页码发生改变时触发
			handleCurrentChange2(num) {
				this.shopQueryInfo.pageNum = num
				// 重新查询数据
				this.toaddStores()
			},
			// 进入添加门店的列表框

			toaddStores() {

				this.shopQueryInfo.communityId = this.communityId;
				this.$http.get('associatedStores/findShopListByAdd', {
					params: this.shopQueryInfo
				}).then(res => {
					this.shopList = res.data.data.list;
					this.shopTotal = res.data.data.total
					this.dialogTableVisible = false
					this.dialogShopVisible = true
					

				})



			},




			// 查询门店信息

			getStore(id) {


				this.communityId = id
				this.storesQueryInfo.communityId = id

				this.$http.get('associatedStores/associatedStoresList', {
						params: this.storesQueryInfo
					})
					.then(res => {
						// console.log(res.data)
						this.storeTotal = res.data.data.total
						this.storesList = res.data.data.list
						this.dialogTableVisible = true


					})

			},


			//编辑小区功能
			editCommunity(row) {
				this.title = '编辑小区'
				this.communityData = row
				this.dialogFormVisible = true
				this.communityData.addOrUpdateFlag = 2
				this.address = [this.communityData.communityProvince, this.communityData.communityCity,
					this.communityData.communityDistrict
				]; // 组成省市区数据
			},




			//删除小区
			delCommunity(communityId) {
				this.$http.post(
					'community/communityRemove', {
						'communityId': communityId
					}).then((resp) => {
					if (resp.data.status == 200) {
						this.$message.success(resp.data.message)
						this.queryCommunityList()
					} else {
						this.$message.error('删除失败')
					}
				})

			},



			// 增加小区确定功能
			confirm() {
				this.$http.post('http://43.143.190.87:8091/panghudaojiaBackend/community/communityUpdate', this
					.communityData).
				then((resp) => {
					if (resp.data.status == 200) {
						this.$message.success(resp.data.message)
						this.queryCommunityList()
						this.cancle()
					} else {
						this.$message.error('操作失败')
					}

				})
			},



			// 取消功能
			cancle() {
				this.dialogFormVisible = false;
				this.address = [];
				this.communityData = {
					addOrUpdateFlag: 1,
					communityAddress: "",
					communityAreaCode: "",
					communityCity: "",
					communityCoordinates: "",
					communityDistrict: "",
					communityId: "",
					communityLatitude: "",
					communityLongitude: "",
					communityName: "",
					communityProvince: "",
				}
			},



			// 获取经纬度0a  params相当于传参数了
			getLocation() {
				this.$http.get('https://restapi.amap.com/v3/geocode/geo', {
					params: {
						key: '457886b5972a97e93fb9cdccebfd450f',
						address: this.communityData.communityProvince +
							this.communityData.communityCity + this.communityData.communityDistrict +
							this.communityData.communityAddress
					}
				}).then((resp) => {
					let location = resp.data.geocodes[0].location
					this.communityData.communityLatitude = location.split(',')[0]
					this.communityData.communityLongitude = location.split(',')[1]

				})

			},

			// 点击新增小区按钮
			addCommunity() {
				this.dialogFormVisible = true
				this.title = '新增小区'
				this.communityData.addOrUpdateFlag = 1
			},


			// 每页显示数量发生改变时触发
			handleSizeChange(val) {
				// 更改请求参数中的pageSize
				this.queryInfo.pageSize = val
				// 设置当改变后默认访问第一页
				this.queryInfo.pageNum = 1
				// 重新查询数据
				this.queryCommunityList()
			},
			// 页码发生改变时触发
			handleCurrentChange(num) {
				this.queryInfo.pageNum = num
				// 重新查询数据
				this.queryCommunityList()
			},


			// 每页显示数量发生改变时触发
			handleSizeChange1(val) {
				// 更改请求参数中的pageSize
				this.storesQueryInfo.pageSize = val
				// 设置当改变后默认访问第一页
				this.storesQueryInfo.pageNum = 1
				// 重新查询数据
				this.getStore(this.communityId)
			},
			// 页码发生改变时触发
			handleCurrentChange1(num) {
				this.storesQueryInfo.pageNum = num
				// 重新查询数据
				this.getStore(this.communityId)
			},






			// 获得后端的数据
			queryCommunityList() {
				this.$http.get('community/communityList', {
					params: this.queryInfo
				}).then((resp) => {
					if (resp.data.status == 200) {
						this.communityList = resp.data.data.list

						this.total = resp.data.data.total
					} else {
						this.$message.error('小区数据获取异常')
					}
				})
			}
		},



		mounted() {
			this.queryCommunityList()
		},



		watch: {
			dataValue(newValue, oldValue) {
				this.queryInfo.startTime = newValue[0]
				this.queryInfo.endTime = newValue[1]
			},
			address() {
				this.communityData.communityProvince = this.address[0];
				this.communityData.communityCity = this.address[1];
				this.communityData.communityDistrict = this.address[2];
			}


		},




	}
</script>

<style>
</style>